<!-- 测站图例 -->
 <template>
    <div class="lenged">
        <div class="title">测站图例</div>
        <div class="icon">
            <div class="item" v-for="item in icons" :key="item.id">
            <img :src="item.icon" alt="">
            <div>{{ item.titile }}</div>
        </div>
        </div>
    </div>
 </template>
 
 <script>
 import {v4 as uuidv4} from 'uuid'
 export default {
    name:"Lenged",
    data(){
        return {
            icons:[
                {
                    id:uuidv4(),
                    titile:"江河站",
                    icon:require('/src/assets/lenged/江河.png'),
                },
                {
                    id:uuidv4(),
                    titile:"超警戒站",
                    icon:require('/src/assets/lenged/超警戒站.png'),
                },
                {
                    id:uuidv4(),
                    titile:"水库站",
                    icon:require('/src/assets/lenged/水库站.png'),
                },
                {
                    id:uuidv4(),
                    titile:"超汛限水库",
                    icon:require('/src/assets/lenged/超汛限站.png'),
                }
            ],
        }
    }
 }
 </script>
 
 <style lang="scss" scoped>
 .lenged{
    position: fixed;
    bottom: 3rem;
    right: 30rem;
    z-index: 10;
    padding: 1rem;
    color: white;
   background-color: #15385A;
   .title{
    text-align: center;
    margin-bottom: 0.5rem;
   }
   .item{
    display: flex;
    justify-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
   }

 }
 </style>